<template>
	<view v-if="is_show" style="overflow-x: hidden;">
		<view class="head">
			<view class="" :style="{'height':  statusBarHeight+'px'}"></view>
			<view class="head__on" :style="{'width':windowWidth+'px','height':  naviBarHeight+'px'}">
				<view @click="toBack" class="head__on__img">
					<image src="/static/icon/fanhui.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
				</view>
				<view style="font-size: 32rpx;color: #000000;">上报详情</view>
			</view>
		</view>
		<view class="" :style="{'height': Number(statusBarHeight + naviBarHeight)+'px'}"></view>



		<scroll-view scroll-x="false" scroll-y="true" style="width: 99.3% !important;" :style="'height:'+ Number(windowHeight - 60 -  Number(statusBarHeight + naviBarHeight))+'px'">
			<view class="scroll_view_item">
				<view class="scroll_view_item__title">
					上报单位：
				</view>
				<input class="text-oneline scroll_view_item__content" v-model="report_param.depName" :disabled="true" value="" type="text"
				 @click="showDepName()" />
			</view>
			<view class="scroll_view_item">

				<view class="scroll_view_item__title">
					上报时间：
				</view>
				<input class="text-oneline scroll_view_item__content" disabled="disabled" type="text" :value="report_param.time" />
			</view>
			<view class="scroll_view_item">
				<view class="scroll_view_item__title">
					上报人：<text style="opacity: 0;">站</text>
				</view>
				<input class="text-oneline scroll_view_item__content" type="text" disabled="true" v-model="report_param.depUserName" />
			</view>
			<view class="scroll_view_item">
				<view class="scroll_view_item__title">
					上报标题：
				</view>

				<input class="text-oneline scroll_view_item__content" :value="report_param.title" :disabled="report_status != 9"
				 type="text" />
			</view>
			<view class="scroll_view_item" style="align-items: flex-start;flex-direction: column;">
				<view class="scroll_view_item__title">
					上报内容：
				</view>
				<view class="" style="position: relative;width: 100%;">
					<textarea style="width: 100%;background: #f8f8f8;margin-top: 24rpx;font-size: 28rpx;padding: 20rpx;" :disabled="report_status != 9"
					 maxlength="180" @input="lineChange" :value="report_param.context" />
					</view>
				
				</view>

			
			<view class="scroll_view_item" style="align-items:flex-start;flex-wrap: wrap;">
				<view class="scroll_view_item__title">
					拍照上传：
				</view>
				<view class="" style="flex: 1;flex-wrap: wrap;display: flex;justify-content:  flex-start;">
					<image v-if="report_status == 9" src="/static/icon/shangbao_icon_camera.png" @click="openSelectBox" style="width: 134rpx;height: 134rpx;margin-bottom: 20rpx;margin-right: 6rpx;" mode=""></image>
									
					<image @click.stop="previewImage(item)" v-for="(item,index) in img_list"  :key="index" :src="item"   style="width: 134rpx;height: 134rpx;margin-bottom: 20rpx;margin-right: 6rpx;" mode="aspectFill"></image>
			
				</view>
			
				
			</view>
			

	
			<view class="" style="display: flex;align-items: center;justify-content: center;margin-top: 60rpx;margin-bottom: 60rpx;">
				<view class="" @click="uploadSnapshot" style="font-size: 28rpx;padding: 15rpx 40rpx 15rpx 40rpx;display: flex;align-items: center;justify-content: center;border-radius: 10rpx;background-color: rgb(0,172,255);color: #FFFFFF;">
					{{report_status == 9?'上报':'确定'}}
				</view>
				
				
				
				<view class="" v-if="report_status == 9" @click="revise()" style="font-size: 28rpx;margin-left: 126rpx;padding: 15rpx 40rpx 15rpx 40rpx;display: flex;align-items: center;justify-content: center;border-radius: 10rpx;background-color: #cc0e1e;color: #FFFFFF;">
				保存
				</view>
				
				
				
			</view>
		</scroll-view>
		
		
		<!-- 修改 -->
		
		
		
		<view class="bounced" v-if="is_out">
			<view class="bounced__box">
				<view class="bounced__box__title">
					确认保存
				</view>
				<view class="bounced__box__button">
					<view class="bounced__box__button__no" @click="goBack">取消</view>
					<view class="bounced__box__button__yes" @click="goLogin">确定</view>
				</view>
			</view>
		</view>
		
		
		

		
		<view class="no" v-if="is_deps_show">
			<view class="no__box">
				<view class="no__box__title">
					<view class="no__box__title__text" @click="is_deps_show = !is_deps_show">
						取消
					</view>
				</view>
				<view class="no__box__content"  >
						<view class="no__box__content__text" v-for="(item,index) in deps_list" :key='index' @click="selectDepart(index)">
							{{item.departName}}
						</view>
				</view>
			</view>
		</view>

		<view v-if="is_tan" class="pai">
			<view class="pai__box">
				<view class="pai__box__content">
					<view class="pictureModal-unit" @click="addCamera">
						拍照
					</view>
					<view class="" style="height:2rpx;width: 100%;background-color: rgba(247, 247, 247, 1);">
		
					</view>
					<view class="pictureModal-unit" @click="uploadImg">
						从手机相册选择图片
					</view>
					<view class="" style="width:100%;height:12rpx;background:rgba(247,247,247,1);">
		
					</view>
					<view class="pictureModal-unit" @click="hideModal()">
						取消
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		Debounce
	} from 'common/utils.js' // 防抖函数（减少函数的调用）
	import moment from '@/utils/moment.min.js'
	export default {
		data() {
			return {
				is_show:false,
				windowWidth: 0, //屏幕宽度
				windowHeight: 0, //屏幕高度
				titleHeight: 0, //状态栏和导航栏的总高度
				statusBarHeight: 0, //状态栏高度
				naviBarHeight: 0, //导航栏高度
		
				
				report_id:'',//上报id
				report_status:0,
				report_param:{
					depId:'', // 部门id
					depName:'',//部门名称
					depUserName:'',//上报人
					time:'',//上报时间
					title:'', //标题
					context:'',//上报内容
					pic:'',//上报图片
				},
				cursor_num:0,//字数
				is_tan: false,
				is_out:false,
				img_list:[],
				
				is_deps_show:false,
				deps_list:[],
			};
		},
		onLoad(e) {
			let self = this;
			const res = uni.getSystemInfoSync()
			const system = res.platform
			self.statusBarHeight = res.statusBarHeight
			if (system === 'android') {
				self.titleHeight = (48 + self.statusBarHeight)
			} else if (system === 'ios') {
				self.titleHeight = (44 + self.statusBarHeight)
			}
			self.naviBarHeight = self.titleHeight - self.statusBarHeight
		
			self.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			self.windowWidth = uni.getSystemInfoSync().windowWidth;
			self.windowHeight = uni.getSystemInfoSync().windowHeight;
			
			this.report_param.id =e.id
			

			this.init()
			
			this.$appReport.fSysDepartGetDeps().then((res)=>{
					
				this.deps_list= res.data.result
				
				
			})
		},
		methods: {
			init(){
				this.$appReport.fAppReportGetReport({
					id: this.report_param.id
				}).then((res) => {
					var data = res.data.result
					console.log(data)
					var userInfo = uni.getStorageSync('userInfo')
					this.report_param.depUserName = userInfo.realname //获取上报人姓名
					this.report_param.depId = data.depId //部门id
					this.report_param.time = moment(data.updateTime?data.updateTime:data.createTime).format('YYYY-MM-DD')
					this.report_param.title = data.title
					this.report_param.context = data.context 
					this.report_param.pic = data.pic
					
					this.report_status = data.status
					if(data.pic){
						if(data.pic == ''){
							
						}else{
							this.img_list = data.pic.split(',')
						}
					}
					
					this.$appReport.fSysDepartGetDeps().then((res)=>{
						var data = res.data.result
						//判断是否存在部门id
						if(this.report_param.depId){
							this.report_param.depName = data.filter(val => val.id == this.report_param.depId)[0].departName
						}else{
							this.report_param.depName = data[0].departName
						}
			
						this.is_show = true						
						this.$forceUpdate()
					})

					
				}).catch(err => {
					console.log(err)
				})
				

			},
			previewImage(img) {
				uni.previewImage({
					current: img, // 当前显示图片的http链接
					urls: [img] // 需要预览的图片http链接列表
				});
			},
			toBack(){
				uni.navigateBack({
				    delta: 1
				});
			},
			/**
			 * @name 上报
			 */
			uploadSnapshot(){
				if(this.report_status != 9){
					uni.navigateBack({
					    delta: 1
					});
				}else{
					if(this.report_param.depName == ''){
										uni.showToast({
										    title: '请选择上报单位',
										    duration: 2000,
											icon:'none'
										});
										return
									}
									if(this.report_param.depUserName == ''){
										uni.showToast({
										    title: '请填写上报人',
										    duration: 2000,
											icon:'none'
										});
										return
									}
									if(this.report_param.title == ''){
										uni.showToast({
										    title: '请填写上报标题',
										    duration: 2000,
											icon:'none'
										});
										return
									}
									if(this.report_param.context == ''){
										uni.showToast({
										    title: '请填写上报内容',
										    duration: 2000,
											icon:'none'
										});
										return
									}
					
									this.report_param.pic = this.img_list.join(',')
									console.log(this.report_param)
									
									this.$appReport.fAppReportReport(this.report_param).then((res) =>{
										console.log(res)
					
										this.init()
										uni.showToast({
										    title: '上报成功',
										    duration: 400,
											icon:'none'
										});
										setTimeout(() => {
											uni.navigateBack()
										},400)
										uni.$emit('updateMyReport_event',{msg:'页面更新'})
									}).catch(err => {
										console.log(err)
					      			})
				}

			},
			/**
			 * @name 删除上报
			 */
			revise: Debounce(
				function() {
					this.is_out = !this.is_out
				}),
			
			
			
			goBack() {
				this.is_out = !this.is_out
			},
			
			
			goLogin: Debounce(
				function() {
					this.is_out = !this.is_out
					if(this.report_status != 9){
						uni.navigateBack({
						    delta: 1
						});
					}else{
						if(this.report_param.depName == ''){
											uni.showToast({
											    title: '请选择上报单位',
											    duration: 2000,
												icon:'none'
											});
											return
										}
										if(this.report_param.depUserName == ''){
											uni.showToast({
											    title: '请填写上报人',
											    duration: 2000,
												icon:'none'
											});
											return
										}
										if(this.report_param.title == ''){
											uni.showToast({
											    title: '请填写上报标题',
											    duration: 2000,
												icon:'none'
											});
											return
										}
										if(this.report_param.context == ''){
											uni.showToast({
											    title: '请填写上报内容',
											    duration: 2000,
												icon:'none'
											});
										}
						
										this.report_param.pic = this.img_list.join(',')
										console.log(this.report_param)
										this.$appReport.fAppReportSave(this.report_param).then((res) =>{
											console.log(res)
						
											this.init()
											uni.showToast({
											    title: '修改成功',
											    duration: 400,
												icon:'none'
											});
											setTimeout(() => {
												uni.navigateBack()
											},400)
											uni.$emit('updateMyReport_event',{msg:'页面更新'})
										}).catch(err => {
											console.log(err)
						      			})
					}
				}),
			lineChange(e){
				this.cursor_num = e.target.cursor
			},
			openSelectBox() {
				this.is_tan = true
			},
			addCamera() {
				this.is_tan = false
				uni.chooseImage({
					count: 6 - this.img_list.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //拍照
					success:(res)=> {
						wx.showLoading({
							title: '上传中...',
							mask: false
						});
						let tempFilePaths=  res.tempFilePaths
						
						var dataList = [];
						let imgs = [];
						dataList =dataList.concat(res.tempFilePaths);
						let uploadImgStr = tempFilePaths.join(',')
						imgs = dataList.map((value, index) => {
							return {
								name: "file",
								uri: value,
								file:value,
								
							}
						})
			
						const token =  uni.getStorageSync('token');
						
						for(var i=0;i<imgs.length;i++){
							
							var arr  = []
							arr.push(imgs[i])
							uni.uploadFile({
								url:"http://111.62.218.228:18081/smp/sys/common/upload",     // 后端api接口
								files: arr, // uni.chooseImage函数调用后获取的本地文件路劲
								name:'file',     //后端通过'file'获取上传的文件对象
								header:{
									"X-Access-Token":token,
								},
								formData: {
								    'biz': 'temp',
									'file':uploadImgStr
								},
								success:(res) => {
									wx.hideLoading();
									this.img_list.push(JSON.parse(res.data).message)
									uni.showToast({
										title: '图片上传成功',
										icon: 'none',
										duration: 2000
									})
								},
								fail:(err) =>{
									console.log(err)
									uni.showToast({
										title: '图片上传失败',
										icon: 'none',
										duration: 2000
									})
								}
							});
						}
			
			
			
					}
				});
			},
			uploadImg(){
				this.is_tan = false
				uni.chooseImage({
					count: 6 - this.img_list.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success:(res)=> {
						wx.showLoading({
							title: '上传中...',
							mask: false
						});
						let tempFilePaths=  res.tempFilePaths
						
						var dataList = [];
						let imgs = [];
						dataList =dataList.concat(res.tempFilePaths);
						let uploadImgStr = tempFilePaths.join(',')
						imgs = dataList.map((value, index) => {
							return {
								name: "file",
								uri: value,
								file:value,
								
							}
						})
			
						const token =  uni.getStorageSync('token');
						
						for(var i=0;i<imgs.length;i++){
							
							var arr  = []
							arr.push(imgs[i])
							uni.uploadFile({
								url:"http://111.62.218.228:18081/smp/sys/common/upload",     // 后端api接口
								files: arr, // uni.chooseImage函数调用后获取的本地文件路劲
								name:'file',     //后端通过'file'获取上传的文件对象
								header:{
									"X-Access-Token":token,
								},
								formData: {
								    'biz': 'temp',
									'file':uploadImgStr
								},
								success:(res) => {
									wx.hideLoading();
									this.img_list.push(JSON.parse(res.data).message)
									uni.showToast({
										title: '图片上传成功',
										icon: 'none',
										duration: 2000
									})
								},
								fail:(err) =>{
									console.log(err)
									uni.showToast({
										title: '图片上传失败',
										icon: 'none',
										duration: 2000
									})
								}
							});
						}
			
			
			
					}
				});
			},
			hideModal(){
				this.is_tan = false
			},
			//展开单位选择框
			showDepName() {
				this.is_deps_show = true
			},
			//选择上报单位
			selectDepart(index){
				this.report_param.depName = this.deps_list[index].departName
				this.report_param.depId = this.deps_list[index].id
				this.is_deps_show = false
			}
		}
	}
</script>

<style lang="scss">
	.head {
		position: fixed;top: 0;left: 0;right: 0;background-color: #FFFFFF;border-bottom: 1px solid #f8f8f8;
		&__on {
			display: flex;align-items: center;justify-content: center;position: relative;
			&__img {
				position:absolute;left: 43rpx;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 32rpx;color: #000000;
			}
		}
	}
	.scroll_view_item{
		border-bottom: 1px solid #f8f8f8;padding:30rpx;display: flex;align-items: center;
		
		&__title{
			display: inline-block;white-space: nowrap;font-size: 28rpx;
		}
		&__content{
			margin-left: 80rpx;text-align: right;font-size: 28rpx;
		}
	
	}
	.text-oneline {
		display: inline-block;
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}
	
	.cu-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	
	.cu-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
	
	
	.pictureModal-unit {
		width: 100%;
		text-align: center;
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 22px;
		padding: 30rpx 0rpx;
	}
	.no {
		position: fixed;top: 0rpx;bottom: 0px;left: 0px;right: 0px;background: rgba(0, 0, 0, 0.6);
		&__box {
			position: absolute;bottom: 0rpx;left: 0;right: 0;
			&__title {
				flex: 1;background-color: #FFFFFF;border-radius: 12rpx 12rpx 0rpx 0rpx;height: 40rpx;display: flex;align-items: center;justify-content: flex-end;padding: 30rpx;
				&__text {
					font-size: 16px;
				}
			}
			&__content {
				flex: 1;height: 300rpx;display: flex;flex-direction: column;overflow-y: auto;-webkit-overflow-scrolling :touch; overflow-x: hidden; white-space: nowrap;background-color: #f6f6f6;
				&__text {
					font-size: 14px;padding: 16rpx;margin-top: 10rpx;background-color: #FFFFFF;
				}
			}
		}
	}
	.pai {
		position: fixed;top: 0rpx;bottom: 0px;left: 0px;right: 0px;background: rgba(0, 0, 0, 0.6);
		&__box {
			position: absolute;bottom: 0rpx;left: 0;right: 0;
			&__content {
				display: flex;flex-direction:column;background-color: #FFFFFF;border-radius: 48rpx 48rpx 0px 0px;
			}
		}
	}
	.bounced {
		width: 100%;height: 100%;background-color: rgba(0,0,0,0.5); position: fixed;top: 0rpx;left: 0rpx;
		&__box {
			width: 560rpx;height: 296rpx;border: 2rpx solid #000000;background-color: #FFFFFF;position: absolute;top: 46.6%;left: 50%; transform: translate(-50%,-50%);border-radius: 12rpx;overflow: hidden;
			&__title {
				height: 200rpx;display: flex;align-items: center;justify-content: center;
			}
			&__button {
				width: 100%;height: 92rpx;display: flex;align-items: center;border-top: 2rpx solid rgba(0,0,0,0.04);justify-content: center;
				&__no {
					width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;color: rgba(153,153,153,1);background-color: #FFFFFF;font-size: 30rpx;
				}
				&__yes {
					width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;border-left: 2rpx solid rgba(0,0,0,0.04);color: rgba(49,114,182,1);background-color: #FFFFFF;font-size: 30rpx;font-weight: 700;
				}
			}
		}
	}
</style>
